<template>
	<view>
		<view class="my_background">
			<view class="my_top">
				<view class="icon"></view>
				<view>我要买车</view>
			</view>
			<view class="subit">
				<view>提交信息，快速获取评估价</view>
			</view>
			<view class="my_inpt">
				<view>
					<input type="text" placeholder="请输入手机号" />
				</view>
				<navigator class="guzhi" open-type="reLaunch" url="../buycar/buycar">立即估值</navigator>
			</view>
		</view>
		<view class="my_container">
			<view class="my_tops">
				<view class="my_top2">
					<view>
						<image src="/static/lianxi.png"></image>
					</view>
					<view class="texts">全国代购</view>
				</view>
				<view class="my_top3">
					<view>
						<image src="/static/room.png"></image>
					</view>
					<view class="texts">到店估值</view>
				</view>
			</view>
		</view>
		<!-- 便捷选车 -->
		<view class="bianjieCar">
			<view class="my_top">
				<view class="icon"></view>
				<view style="font-size:40rpx;font-weight: bold;">便捷选车</view>
			</view>
			<view class="my_icons1">
				<view class="your_one">
					<view v-for="(item,index) in carList.convenientBrands" :key="index" class="my_icons1_l">
						<image :src="item.logo"></image>
						<view>{{item.label}}</view>
					</view>
				</view>
				<view class="your_one">
					<view v-for="(m,n) in carList.convenientPrices" :key="n" class="my_icons1_k">
						<view>{{m.label}}</view>
					</view>
				</view>
				<view class="your_one">
					<view v-for="(j,l) in carList.convenientModels" :key="l" class="my_icons1_n">
						<view>{{j.label}}</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 二手车模块 -->
		<view>
			<view class="my_top">
				<view class="icon"></view>
				<view style="font-size:40rpx;font-weight: bold;">二手车 </view>
				<span>查看更多></span>
			</view>
			<view class="two_box">
				<view v-for="(item, index) in twoList" :key="index" class="twoList">
					<image :src="item.cover"></image>
					<view style="width:336rpx;">
						<view>
							<view
								style="display:inline-block;padding:5rpx 10rpx;border-radius: 10rpx;background-color: orange;">
								腾发自营</view>{{item.carName}}
						</view>
						<view>/{{item.mileage}}万公里</view>
						<view style="color: red;font-size: 40rpx;font-weight: blod;">{{item.currentPrice}}</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 新车模块 -->
		<view class="teng_box">
			<view class="my_top">
				<view class="icon"></view>
				<view style="font-size:40rpx;font-weight: bold;">新车</view>
				<span>查看更多></span>
			</view>
			<!-- 1 -->
		<!-- 	<view class="newCar">
			 <view style="font-size:36rpx;font-weight: bold;">{{newCarLists[0].carBrandMarker}}</view>
			 <view class="newcar_l"><view style="color: blue;">{{newCarLists[0].type}}</view>{{newCarLists[0].colorLabel}}</view>
			 <view  class="newcar_l"><view style="font-size: 35rpx;font-weight: bold;color: red;margin-right: 50rpx;">{{newCarLists[0].currentPrice}}万</view><view>指导价：-万/优惠-元</view>
		    </view>
	        </view> -->
             <!-- 2 -->
		</view>
		<!-- 新闻咨讯 -->
		<view>
			<view class="my_top">
				<view class="icon"></view>
				<view style="font-size:40rpx;font-weight: bold;">新闻咨讯</view>
				<view class="my_ba">查看更多></view>
			</view>
			<view class="newFix">
				<view v-for="(a,b) in newList" :key="b" class="newCarBox">
					<image :src="a.cover"></image>
					<view style="width: 336rpx;font-weight: bold;font-size: 36rpx;">{{a.title}}</view>
					<view class="newcar_Tp">阅读:{{a.readingVolume}}
						<view></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 版权所有 -->
		<view class="banQuan">
			<view>Copyright © 2019 腾发 All Rights Reserved 版权所有</view>
			<view>豫ICP备14025595号</view>
		</view>
	</view>
</template>

<script>
	import {
		getSongs,
		twoHand,
		newcarList,
		getnews
	} from "../../untils/ajxas.js"
	export default {
		data() {
			return {
				carList: {},
				twoList: [],
				newCarLists: [],
				newList: [],
			}
		},
		beforeCreate() {
			// 快接选车数据请求
			getSongs().then(res => {
				// console.log(res);
				this.carList = res.data.data
				// console.log(this.carList);
			})
			// 二手车数据请求
			twoHand().then(res1 => {
				// console.log(res1);
				this.twoList = res1.data.data.content
				// console.log(this.twoList);
			})
			// 新车数据请求
			newcarList().then(res2 => {
				// console.log(res);
				this.newCarLists = res2.data.data.content
				// console.log(this.newCarLists[0]);
			})
			// 新闻咨讯
			getnews().then(res3 => {
				// console.log(res3);
				this.newList = res3.data.data
				// console.log(this.newList);
			})
		},
		methods: {}
	}
</script>

<style>
	.teng_box{
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	
	.orange {
		background-color: orange;
	}

	.red {
		background-color: #ff007f;
	}

	.my_background {
		width: 750rpx;
		height: 330rpx;
		background-image: url("../../static/background.png");
		background-size: 100%;
	}

	.my_top view {
		display: inline-block;
	}

	.my_ba{
		margin-left: 400rpx;
	}

	.icon {
		display: inline-block;
		margin-top: 15rpx;
		margin-right: 5rpx;
		width: 10rpx;
		height: 30rpx;
		background: #5685fe;
	}

	.subit {
		margin: 50rpx 15rpx;
		height: 10rpx;
		font-size: 25rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #5685fe;
		line-height: 10rpx;
	}

	.my_inpt {
		margin: 10rpx auto;
		width: 720rpx;
		height: 100rpx;
		border: 1px solid #ccc;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: flex-start;
	}

	.my_inpt input {
		width: 550rpx;
		height: 100rpx;
	}

	.my_inpt .guzhi {
		width: 170rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border: 1px solid #ccc;
		background-color: #5685fe;
		color: #ffffff;
		font-size: 35rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.my_container {
		background-color: #ffff;
		width: 700rpx;
		height: 200rpx;
		margin: 10rpx auto;
		padding: 22rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0rpx 5rpx 6rpx 0rpx #ccc;
	}

	.my_container .my_tops {
		width: 660rpx;
		height: 160rpx;
		display: flex;
		justify-content: flex-start;
	}

	.my_tops image {
		width: 60rpx;
		height: 60rpx;
	}

	.my_top2,
	.my_top3 {
		display: flex;
		justify-content: flex-start;
		width: 325rpx;
		height: 160rpx;
		line-height: 200rpx;
		padding-left: 50rpx;
	}

	.texts {
		width: 200rpx;
		height: 60rpx;
		margin-top: -10rpx;
	}

	.my_top2 {
		border-right: 1px solid #ccc;
	}

	.my_icons1 image {
		width: 100rpx;
		height: 100rpx;
	}

	.bianjieCar {
		background-color: #ffffff;
	}

	.my_icons1 {
		width: 750rpx;
		height: 500rpx;
	}

	.my_icons1_l view {
		width: 100rpx;
		text-align: center;
	}

	.your_one {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 60rpx;
	}

	.my_icons1_k,
	.my_icons1_n {
		padding: 10rpx 15rpx;
		background-color: #ddd;
		box-sizing: border-box;
		border-radius: 25rpx;
	}

	.two_box {
		width: 720rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 8rpx auto;
	}

	.twoList {
		margin-top: 50rpx;
		box-shadow: 1rpx 2rpx 5rpx 0rpx #ccc;
		background-color: #ffff;
	}

	.twoList image {
		border-radius: 10rpx;
		width: 336rpx;
		height: 200rpx;
	}

	.newCar {
		width: 720rpx;
		height: 300rpx;
		padding: 0rpx 15rpx;
		background-color: #ffff;
	}

	.newCar view {
		height: 85rpx;
	}

	.newcar_l {
		display: flex;
		justify-content: flex-start;
	}

	.newFix {
		margin: 15rpx auto;
		width: 720rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.newFix image {
		border-radius: 10rpx;
		width: 336rpx;
		height: 300rpx;
	}

	.newCarBox {
		margin-bottom: 80rpx;
		background-color: #ffffff;
	}

	.newcar_Tp {
		margin-top: 50rpx;
	}

	.banQuan {
		width: 750rpx;
		color: #99999;
		font-size: 20rpx;
	}

	.banQuan view {
		height: 60rpx;
		text-align: center;
	}
</style>